<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Disk</title>
<link rel="stylesheet" th:href="@{/easy/css/bootstrap.css}" />
<link rel="stylesheet" th:href="@{/icon/css/font-awesome.min.css}" />
</head>
<body class="bg-b">
	<div class="container-fluid" ms-controller="vm">
		<div class="row">
			<div class="col text-center bg-primary text-white">古诗三百首</div>
		</div>
		<div class="row mt-2">
			<div class="col">
				<div class="form-inline">
					<input id="content" class="form form-control form-control-sm">
					<button class="btn btn-sm btn-success ml-2" onclick="findPoem()">搜索</button>
				</div>
			</div>
		</div>
		<div class="row mt-2" ms-for="p in @list">
			<div class="col">
				<div class="card mt-2">
					<div class="card-header">{{p.title}}</div>
					<div class="card-body">{{p.content}}</div>
				</div>
			</div>
		</div>
	</div>
	</div>
	<!-- js -->
	<script th:src="@{/easy/js/jquery.js}"></script>
	<script th:src="@{/easy/js/avalon.js}"></script>
	<script th:src="@{/page/jqpaginator.js}"></script>
	<script th:src="@{/layer/layer.js}"></script>
	<script>
		//
		var vm = avalon.define({
			$id : "vm",
			list : []
		});
		function findPoem() {
			$.post("/mona/Poetry/find", {
				content : $("#content").val()
			}, function(data) {
				vm.list = data;
			});
		}
	</script>
</body>
</html>